<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Line Width Test</title>
    <script type="text/javascript" src="../build/js/Cindy.js"></script>
    <script type="text/x-cindyscript" id="csinit">
testcase(x,y):=(
  translate([x,y]);
  draw(join([0,0],[1,0]));
  draw(join([0,0],[0,1]));
  draw(join([0,0],[1,1]));
  g=join([-1,1],[1,-1]);
  m=[[0],[0],[1]]*[g];
  m=m+transpose(m);
  drawconic(m);
  drawcircle([0,0],sqrt(2));
  drawarc([1,0],[0,1],[-1,0]);
  drawpolygon([[-1,0],[-0.5,-0.5],[0.5,-0.5],[1,0]]);
  translate([-x,-y]);
);
    </script>
    <script type="text/x-cindyscript" id="csdraw">
alpha(0.5);
drawpolygon([[-1,0],[-0.5,-0.5],[0.5,-0.5],[1,0]],color->[0.25,0,0.5]);
drawarc([1,0],[0,1],[-1,0],color->[0.25,0,0.5]);
testcase(2,3);
linesize(5);
linecolor([1,0,0]);
testcase(8,5);
    </script>
    <script type="text/javascript">
CindyJS({csconsole:true,
  scripts: "cs*",
  defaultAppearance: { alpha: 0.5, lineColor: [0.25, 0, 0.5] },
  angleUnit: "°",
  geometry: [
    {name: "A", type: "Free", pos: [0,0], visible: false},
    {name: "a", type: "Through", pos: [0,1,0], args: [ "A" ]},
    {name: "b", type: "Through", pos: [1,0,0], args: [ "A" ]},
    {name: "c", type: "Through", pos: [1,-1,0], args: [ "A" ]},
    {name: "B", type: "Free", pos: [-1,1], visible: false},
    {name: "C", type: "Free", pos: [1,-1], visible: false},
    {name: "C0", type: "CircleMP", args: [ "A", "B" ]},
    {name: "C1", type: "CircleBy3", args: [ "A", "B", "C" ]}
  ],
  ports: [
    { id: "CSCanvas", width: 680, height: 336, transform: [ { visibleRect: [ -9.06, 9.34, 18.14, -4.1 ] } ], background: "rgb(168,176,192)" } ]
});
    </script>
</head>
<body>
    <div id="CSCanvas"></div>
    <p>There should be three times the same figure, consisting of
    a circle, four lines through it, an arc and a polygon.
    All strokes of each figure should have the same width, color and alpha.
    The figure in the top right should have thicker lines than the others.</p>
</body>
</html>
